<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page errorPage="../error/404.jsp"%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<link rel="stylesheet" type="text/css" href="/css/buyCredtis/amazeui.min.css" />
		<link rel="stylesheet" type="text/css" href="/css/buyCredtis/main.css" />
	</head>

	<body> 


		<div class="pay">
			<!--主内容开始编辑-->
			<div class="tr_recharge">
				<div class="tr_rechtext">
					<p class="te_retit"><img src="/images/buyCredtis/coin.png" alt="" />充值中心</p>
					<p>1.积分是君无邪的虚拟货币，你可以使用积分购买站内的源码或者模板。</p>
					<p>2.积分与人民币换算为1：1，即1元=1积分，你可以选择支付宝或者是微信的付款方式来进行充值，积分每次10个起充。</p>
				</div>
				<form action="/alipay/wxpay.html" method="post"  class="am-form" id="doc-vld-msg">
					<div class="tr_rechbox">
						<div class="tr_rechhead">
							<img src="${user.picpath}" />
							<p>充值帐号：
								<a>${user.nickname}</a>
							</p>
							<div class="tr_rechheadcion">
								<img src="/images/buyCredtis/coin.png" alt="" />
								<span>当前余额：<span>${user.payaccount}</span></span>
							</div>
						</div>
						<div class="tr_rechli am-form-group">
							
						<div class="tr_rechcho am-form-group">
							<span>订单名称：</span>
							<label class="am-radio">
							       <input type="text" id="subject" name="WIDsubject"/>
							    </label>
							
						</div>
						<br />
						<div class="tr_rechcho am-form-group">
							<span>订单说明：</span>
							<label class="am-radio">
							        <textarea cols="30" rows="5" name="WIDbody" id="body"></textarea>
							    </label>
							
						</div>
						<ul class="ui-choose am-form-group" id="uc_01">
							<li>
									<label class="am-radio-inline">
								        	<input type="radio" value="1"  name="WIDtotal_amount" required data-validation-message="请选择一项充值额度"> 1￥
									    </label>
								</li>
							<li>
									<label class="am-radio-inline">
								        	<input type="radio" value="5"  name="WIDtotal_amount" required data-validation-message="请选择一项充值额度"> 5￥
									    </label>
								</li>
								<li>
									<label class="am-radio-inline">
								        	<input type="radio"  value="10"  name="WIDtotal_amount" required data-validation-message="请选择一项充值额度"> 10￥
									    </label>
								</li>
								<li>
									<label class="am-radio-inline">
									        <input type="radio" value="20"name="WIDtotal_amount" data-validation-message="请选择一项充值额度"> 20￥
								      	</label>
								</li>

								<li>
									<label class="am-radio-inline">
									        <input type="radio" value="50"  name="WIDtotal_amount" data-validation-message="请选择一项充值额度"> 50￥
								        </label>
								</li>					
							</ul>
							<!--<span>1招兵币=1元 10元起充</span>-->
						</div>	
											
						<div class="tr_rechcho am-form-group">
							<span>充值方式：</span>
							<label class="am-radio">
							        <input type="radio" name="payid" value="4"  required data-validation-message="请选择一种充值方式"><img src="/images/buyCredtis/wechatpay.png"/>
							    </label>					
						
						</div>
						<div class="tr_rechnum">
							<span>应付金额：</span>
							<p class="rechnum" id="money">0.00元</p>
						</div>
					</div>
					<div class="tr_paybox">
						<input type="submit" value="确认支付" class="tr_pay am-btn" id="sub"/>
						<span>温馨提示：积分只限于在源码或者模板详情中购买，遇到问题请拨打联系电话18161910796。</span>
					</div>
				</form>
			</div>
		</div>
	

		<script type="text/javascript" src="/js/buyCredtis/jquery.min.js"></script>
		<script type="text/javascript" src="/js/buyCredtis/amazeui.min.js"></script>
		<script type="text/javascript" src="/js/buyCredtis/ui-choose.js"></script>

		<script type="text/javascript">
			
			var money	 ="";
			var otherMoney="";
			var other=0;
			// 将所有.ui-choose实例化
			$('.ui-choose').ui_choose();
			// uc_01 ul 单选
			var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
			uc_01.click = function(index, item) {
				console.log('click', index, item.text())

			}
		/* 	uc_01.change = function(index, item) {
				console.log('change', index, item.text())
			
			} */
			$(function() {
				$('#uc_01 li:eq(5)').click(function() {
					$('.tr_rechoth').show();
					$('.tr_rechoth').find("input").attr('required', 'true')
					$('.rechnum').text('10.00元');
				})
				$('#uc_01 li:eq(0)').click(function() {
					$('.tr_rechoth').hide();
				$('.rechnum').text('1.00元');
			$('.othbox').val('');
				})
				$('#uc_01 li:eq(1)').click(function() {
					$('.tr_rechoth').hide();
			$('.rechnum').text('5.00元');
					$('.othbox').val('');
				})
				$('#uc_01 li:eq(2)').click(function() {
					$('.tr_rechoth').hide();
				$('.rechnum').text('10.00元');
					$('.othbox').val('');

				})
					$('#uc_01 li:eq(3)').click(function() {
					$('.tr_rechoth').hide();
				$('.rechnum').text('20.00元');
					$('.othbox').val('');
					

				})
						$('#uc_01 li:eq(4)').click(function() {
					$('.tr_rechoth').hide();
				$('.rechnum').text('50.00元');
					$('.othbox').val('');
					

				})
				$(document).ready(function() {
					$('.othbox').on('input propertychange', function() {
						other = $(this).val();
			$('.rechnum').html(other + ".00元");
				
				

	
					
					});
				});
			})
	
/* 		$('#sub').click(function(){
					var num=0;
					var  keys=false;
					var idea=0;
					var subject="";
					var body="";
		

					if(other!=0){
						keys=true;
		
						if(keys&&other>=10){
							
								
									idea=$(':radio[name="radio1"]:checked').val();//获取充值方式
										subject	=						$("#subject").val();
						body=				$("#body").val();
									console.log(other+".......其他金额的值");
									console.log(idea+".......充值方法");
									console.log(subject+".......订单名称");
									console.log(body+".........订单明细");
		
					
						}		
																	
				
					}
					//金额输入的时候进行ajax		
							num=	$(':radio[name="docVlGender"]:checked').val();//金额获取方式	
							console.log(num+"...........金额的值");										
							 idea=$(':radio[name="radio1"]:checked').val();//获取充值方式
													subject=	$("#subject").val();
									body=	$("#body").val();
						console.log(other+".......其他金额的值");
									console.log(idea+".......充值方法");
									console.log(subject+".......订单名称");
									console.log(body+".........订单明细")
		


			}); */
			$(function() {
				$('#doc-vld-msg').validator({
					onValid: function(validity) {
						$(validity.field).closest('.am-form-group').find('.am-alert').hide();
					},
					onInValid: function(validity) {
						var $field = $(validity.field);
						var $group = $field.closest('.am-form-group');
						var $alert = $group.find('.am-alert');
						// 使用自定义的提示信息 或 插件内置的提示信息
						var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

						if(!$alert.length) {
							$alert = $('<div class="am-alert am-alert-danger"></div>').hide().
							appendTo($group);
						}
						$alert.html(msg).show();
					}
				});
			});
		</script>
	</body>

</html>

